<template>
  <div>
    <!-- 头部导航组件 -->
    <van-nav-bar title="当前城市 -" left-text="返回" left-arrow>
      <template #left>
        <van-icon
          name="cross"
          size="20"
          color="black"
          @click="changeCity({ cityId: 110100, name: '北京' })"
        />
      </template>
    </van-nav-bar>
    <!-- 城市列表 -->
    <van-index-bar :index-list="indexList">
      <template v-for="item in cityList">
        <van-index-anchor :key="item.index" :index="item.index" />
        <!-- <van-cell v-for="el in item.cityname" :key="el" :title="el" /> -->
        <van-cell
          v-for="el in item.list"
          :key="el.cityId"
          :title="el.name"
          @click="changeCity(el)"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import url from "@/config/url";
import Vue from "vue";
import { IndexBar, IndexAnchor, Cell, NavBar, Toast } from "vant";

Vue.use(NavBar);
Vue.use(IndexBar);
Vue.use(Cell);
Vue.use(IndexAnchor);
export default {
  data() {
    return {
      //  右侧索引数据 i o没有城 市名
      indexList: [],
      // 左侧数据
      cityList: [],
    };
  },
  created() {
    // 隐藏底部菜单的状态
    this.$store.commit("film/changeFooter");
    // 数据请求
    this.$http.get(url.cityList).then((res) => {
      // console.log("城市列表res对象");
      // console.log(res);
      // 调用方法处理数据
      // this.parseData(res);
      this.parseData2(res);
    });
  },
  beforeDestroy() {
    //设置显示底部菜单的状态
    this.$store.commit("film/changeFooter");
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    //选择城市之后并存储数据
    changeCity(el) {
      // console.log('点击选择城市');
      localStorage.setItem("cityId", el.cityId);
      localStorage.setItem("cityName", el.name);
      // 获取上级跳转到当前页面的goto路由参数，如果有就跳转到此地址，否则跳转到根路径
      let goto = this.$route.query.goto ? this.$route.query.goto : "/";
      this.$router.push(goto);
      console.log(goto);
    },
    // 方式二：通过数组高级语法 实现数据处理
    parseData2(res) {
      // 1.处理右侧索引数据
      // console.log(res);
      this.indexList = res.data.cities.map((item) => {
        return item.pinyin.slice(0, 1).toUpperCase();
      });
      // set 集合数据类型 特点是天然去重
      // indexList = [...new Set(indexList)].sort()
      this.indexList = Array.from(new Set(this.indexList)).sort();
      // console.log(indexList);

      // 2.处理 左侧城市列表数据
      this.cityList = this.indexList.map((item) => {
        let obj = {};
        obj.index = item;
        obj.list = [];
        res.data.cities.forEach((el) => {
          // 判断首字母要和索引字母相同
          if (el.pinyin.slice(0, 1).toUpperCase() === item) {
            obj.list.push(el);
          }
        });
        return obj;
      });
      console.log(this.cityList);
    },

    parseData(res) {
      // 方式一：通过forEach遍历数组处理数据
      // 1、右侧索引
      let indexList = [];
      res.data.cities.forEach((item) => {
        let letter = item.pinyin.substring(0, 1).toUpperCase();
        if (!indexList.includes(letter)) {
          indexList.push(letter);
        }
      });
      this.indexList = indexList.sort();
      // 2左侧数据
      let cityList = [];
      // 处理左侧数据
      indexList.forEach((item) => {
        let tmp = {};
        tmp.index = item;
        // console.log(tmp.index);
        let arr = [];
        res.data.cities.forEach((el) => {
          if (el.pinyin.substring(0, 1).toUpperCase() == item) {
            arr.push(el.name);
          }
        });
        tmp.cityname = arr;
        cityList.push(tmp);
      });
      console.log(cityList);
      this.cityList = cityList;
    },
  },
};
</script>

<style lang="scss" scoped></style>
